@use 'sass:math';

/*  DataView main Layout by 4K Variables: start */
// @formatter:off
// Win Size Variables
$view-xs-width:                960px; // window extra-small  width
$view-xs-height:               540px; // window extra-small  height
$view-sm-width:               1200px; // window small        width
$view-sm-height:               675px; // window small        height
$view-lg-width:               3520px; // window large        width
$view-lg-height:              1980px; // window large        height
$view-xs-scale:  math.div(1980, 540); // window scale by large div xs
$view-sm-scale:  math.div(1980, 650); // window scale by large div sm
$viewport-width:              3840px; // Main canvas whole   width
$viewport-height:             2160px; // Main canvas whole   height
// Win gutters
$view-gutter-xs-pt:            200px; // window extra-small padding top
$view-gutter-xs-ps:            300px; // window extra-small padding start
$view-gutter-sm-pt:            300px; // window small       padding top
$view-gutter-sm-ps:            120px; // window small       padding start
$view-gutter-lg-pt:             90px; // window large       padding top
$view-gutter-lg-ps:            160px; // window large       padding start
$view-gutter-between-xs:   math.div(($viewport-height - $view-gutter-xs-pt * 2 - $view-xs-height * 3), 2); // gutters between extra-small windows
$view-gutter-between-sm:                  $viewport-height - $view-gutter-sm-pt * 2 - $view-sm-height * 2; // gutters between small windows
// Win Positions
$view-pos-normal-xs-top-top:                                                        $view-gutter-xs-pt; // window extra-small by top    position top
$view-pos-normal-xs-middle-top:         $view-gutter-xs-pt + $view-xs-height + $view-gutter-between-xs; // window extra-small by middle position top
$view-pos-normal-xs-bottom-top: $view-gutter-xs-pt + $view-xs-height * 2 + $view-gutter-between-xs * 2; // window extra-small by bottom position top
$view-pos-normal-xs-left-left:                                                      $view-gutter-xs-ps; // window extra-small by left   position left
$view-pos-normal-xs-right-left:                  $viewport-width - $view-gutter-xs-ps - $view-xs-width; // window extra-small by right  position left

$view-pos-normal-sm-top-top:                                                 $view-gutter-sm-pt; // window small by top    position top
$view-pos-normal-sm-bottom-top:  $view-gutter-sm-pt + $view-sm-height + $view-gutter-between-sm; // window small by bottom position top
$view-pos-normal-sm-left-left:                                               $view-gutter-sm-ps; // window small by left   position left
$view-pos-normal-sm-right-left:           $viewport-width - $view-gutter-sm-ps - $view-sm-width; // window small by right  position right

$view-pos-large-top:                                                         $view-gutter-lg-pt; // window large position top
$view-pos-large-left:                                                        $view-gutter-lg-ps; // window large position left

$view-pos-all-erased-top-top:            0 - $view-sm-height; // window erased by top         position top
$view-pos-all-erased-middle-left-left:    0 - $view-sm-width; // window erased by left middle position left
$view-pos-all-erased-middle-right-left:      $viewport-width; // window erased by left middle position left
$view-pos-all-erased-bottom-top:            $viewport-height; // window erased by bottom      position top

$animation-duration:       500ms;
//  @formatter:on
/*  DataView main Layout by 4K Variables: start */